<template>
    <el-table-column
        v-if="columnData.type !== 'selection'"
        :prop="columnData.prop || undefined"
        :label="columnData.label || ''"
        :width="columnData.width || undefined"
        :minWidth="columnData.minWidth || undefined"
        :align="columnData.align || 'center'"
        :show-overflow-tooltip="columnData.showOverflowTooltip"
        :fixed="columnData.fixed || undefined"
        :type="columnData.type || 'default'"
        :v-show="columnData.visible"
    >
        /** 如果表头children不为空 递归遍历table-column组件
        下方默认插槽模板将不会渲染 */
        <template v-if="columnData.children && columnData.children.length > 0">
            <table-column
                v-for="(item, idx) in columnData.children"
                :key="item.label + idx"
                :columnData="item"
            >
                <template slot-scope="scope">
                    <slot :scope="scope"></slot>
                </template>
            </table-column>
        </template>
        <template slot-scope="scope">
            <slot
                v-if="columnData.type"
                :scope="{ ...scope, type: columnData.type }"
            ></slot>
            <template v-else>{{
                scope.row[scope.column.property] || ''
            }}</template>
        </template>
    </el-table-column>
    <el-table-column
        v-else-if="columnData.type && columnData.type === 'selection'"
        type="selection"
        :align="columnData.align || 'center'"
        :width="columnData.width || undefined"
        :minWidth="columnData.minWidth || undefined"
        :fixed="columnData.fixed || undefined"
    />
</template>

<script>
import tableColumn from './tableColumn.vue'
export default {
    name: 'tableColumn',
    components: {
        tableColumn
    },
    props: {
        /**
         * 表头数据
         * @type Boolean/String
         * @value Boolean/String
         */
        columnData: {
            type: Object,
            required: true
        }
    },
    methods: {}
}
</script>

<style lang="scss" scoped></style>
